<template>
  <div>
    <!-- 我是库存预警页面 -->

    <div class="buju">
      
      <!-- 子路由 -->
      <div class="ziluyou">
        <button @click="toChildren1" class="children1" ref="qwe1">有效期预警</button>
        <button @click="toChildren2" class="children2" ref="qwe2">仓库存储预警</button>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  methods: {

    // 子路由1
    toChildren1() {
       var btn1=this.$refs.qwe1;
       var btn2=this.$refs.qwe2;
       btn1.style.backgroundColor= "#39b9ae"; 
       btn2.style.backgroundColor=' #ebebeb';
      this.$router.push({
        name: '有效期预警',
      });
    },
    // 子路由2
    toChildren2() {
       var btn2=this.$refs.qwe2;
        btn2.style.backgroundColor= "#39b9ae"; 
        var btn1=this.$refs.qwe1;
        btn1.style.backgroundColor=' #ebebeb';
      this.$router.push({
        name: '仓库存储预警',
      });

    },
    
  },
  mounted(){
    // var botton=document.getElementById('children');
   
     
    // function btn(){

    //   if(botton===true){
    //     botton.style.backgroundColor= "#39b9ae"; 
    //   }
    // }
  },
  data() {
    return {
    
      //   失效日期
      options: [
        {
          value: '选项1',
          label: '一个月',
        },
        {
          value: '选项2',
          label: '二个月',
        },
        {
          value: '选项3',
          label: '三个月',
        },
      ],
      value: '',
      // 日期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },
      value11: '',
      value22: '',
      //   药品分类
      options2: [
        {
          value: '选项1',
          label: '阿莫西林2',
        },
        {
          value: '选项2',
          label: '苯海拉明注射液2',
        },
        {
          value: '选项3',
          label: '氯雷他定片2',
        },
        {
          value: '选项4',
          label: '999感冒颗粒2',
        },
        {
          value: '选项5',
          label: '鼻炎片2',
        },
      ],
      value2: '',
    };
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.buju {
  width: 100%;
}
/* 子路由的div */
.ziluyou {
  width: 350px;
  /* border:1px solid yellowgreen; */
  position: relative;
  top: 0px;
  left: 350px;
}
.children1 {
  margin: 0;
  width: 150px;
  height: 40px;
  font-size: 16px;
  border: 2px solid #d1d1d1;
  /* color: #ffffff; */
  margin-left: 20px;
  background-color: #39b9ae;
  position: relative;
  top: 0px;
  left: 24px;
   color: rgb(97, 97, 97);
  /* 去除点击选中按钮的外边框色 */
  outline:0 none !important; 
}
.children2 {
  width: 150px;
  height: 40px;
  font-size: 16px;
  border: 2px solid #d1d1d1;
  color:  rgb(97, 97, 97);
  margin-left: 20px;
  background-color: #ebebeb;
  position: relative;
  top: 0px;
  left: 0px;
  /* 去除点击选中按钮的外边框色 */
  outline:0 none !important; 
}
.el-radio-group.el-radio-button {
  text-align: center;
}
.section1 {
  width: 100%;
}
/* 搜索框 */
.section1-1 {
  border-bottom: 1px solid gainsboro;
  width: 250px;
  display: inline-block;
  position: relative;
  /* top: 40px; */
  top: 50px;
  left: 15px;
  /* display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  flex-direction: row; */
}
.input1 {
  width: 200px;
  height: 40px;
  border: none;
  margin-left: 10px;
  font-size: 17px;
}
input:focus {
  border: none;
  outline: none;
}
.section1-2 {
  display: inline-block;
  width: 30%;
  height: 80px;
  border: 1px solid green;
  position: absolute;
  /* top: 155px; */
  top: 135px;
  right: 0px;
}
.shezhi {
  position: relative;
  top: 0px;
  right: -230px;
  width: 170px;
  height: 30px;
  border-radius: 5%;
  border: 2px solid #a0a5a4;
  color: black;
  margin-left: 20px;
  background-color: #d1cfcf;
  outline: none;
}
.daochu {
  position: relative;
  top: 50px;
  right: -120px;
  width: 80px;
  height: 30px;
  border-radius: 5%;
  border: 2px solid #84ccbe;
  color: white;
  margin-left: 20px;
  background-color: #42d3d8;
  outline: none;
}
/* .nei1 {
  border: 1px solid yellow;
  margin: 10px 0px 0px 0px;
  position: relative;
  top: 50px;
  left: 0px;
} */
.nei1 {
  border: 1px solid yellow;
  margin: 10px 0px 0px 0px;
  position: relative;
  top: 60px;
  left: 0px;
}
/* 日期选择器 */
.wai-block {
  display: inline-block;
  margin: 0px 10px;
}
.block1 {
  display: inline-block;
}
.block2 {
  display: inline-block;
}
.block1 >>> .el-input__inner {
  width: 140px !important;
}
.block1 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}
.block2 >>> .el-input__inner {
  width: 140px !important;
}
.block2 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}
.xuanze {
  display: inline-block;
}
.xuanze >>> .el-input__inner {
  width: 150px;
  margin: 0px 10px;
}
.time-wen {
  font-size: 16px;
}
.btn {
  width: 85px;
  height: 40px;
  border: 2px solid #39b9ae;
  color: #39b9ae;
  /* font-size: 15px; */
  margin-left: 20px;
  background-color: #ffffff;
  outline: none;
  position: relative;
  top: 1px;
  right: 25px;
}
.kucun {
  font-size: 16px;
}
.inp {
  width: 35px;
  height: 25px;
  border: 1px solid rgb(182, 178, 178);
  border-radius: 5%;
}
.btn-qr {
  width: 85px;
  height: 40px;
  border: 2px solid #39b9ae;
  color: #39b9ae;
  /* font-size: 15px; */
  margin-left: 20px;
  background-color: #ffffff;
  outline: none;
}

</style>